<template>
  <div class="highlevel-api">
    <el-container>
      <el-header style="height: 40px">
        <el-button link type="primary" @click="openDialog">添加</el-button>
      </el-header>
      <el-main>
        <el-table :data="highApiDatas">
          <el-table-column type="expand">
            <template #default="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="函数名称 :">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="输入 :">
                  <el-row v-for="item in props.row.input" :key="item.index">
                    <span>
                      {{ item.dataType ? item.dataType.name : ' ' }}
                      {{ item.name ? item.name : ' ' }}
                    </span>
                  </el-row>
                </el-form-item>
                <el-form-item label="输出 :">
                  <span>{{ props.row.output.name }}</span>
                </el-form-item>
                <el-form-item label="配置参数 :">
                  <span>{{ props.row.config.name }}</span>
                </el-form-item>
                <el-form-item label="对应底层API :">
                  <span>{{ props.row.lowApi.name }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="函数名称" prop="name"> </el-table-column>
          <el-table-column label="对应底层API" prop="lowApi.name">
          </el-table-column>
          <el-table-column label="操作" width="120"
            ><template v-slot="scope">
              <el-button
                @click="updateRow(scope.$index, scope.row)"
                :link="true"
                type="primary"
              >
                修改
              </el-button>
              <el-button
                v-if="scope.row.isNew"
                @click="removeRow(scope.$index, scope.row)"
                :link="true"
                type="primary"
              >
                删除
              </el-button>
              <el-button
                v-else
                @click="removeRow(scope.$index, scope.row)"
                :link="true"
                type="primary"
                disabled
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <WmcDialog
      title="添加高层API接口"
      :dialogVisible="dialogVisible"
      width="500px"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    >
      <template #form>
        <el-form
          :model="addHighLevelApi"
          ref="addHighLevelApiRef"
          label-width="100px"
        >
          <el-form-item label="函数名称：" prop="name">
            <el-input v-model="addHighLevelApi.name"></el-input>
          </el-form-item>
          <el-form-item label="输入参数：">
            <template
              v-for="(inputItem, index) in addHighLevelApi.input"
              :key="index"
            >
              <el-col :span="10">
                <el-select v-model="inputItem.dataType">
                  <el-option
                    v-for="item in dataType"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="1"> - </el-col>
              <el-col :span="8">
                <el-form-item>
                  <el-input v-model="inputItem.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-button @click="deleteInput(index)">删除</el-button>
              </el-col>
            </template>
          </el-form-item>
          <el-form-item label="输出类型">
            <el-select v-model="addHighLevelApi.output.name">
              <el-option
                v-for="dataTypeItem in dataType"
                :key="dataTypeItem.value"
                :value="dataTypeItem.value"
              >
                {{ dataTypeItem.label }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配置参数">
            <el-select v-model="addHighLevelApi.config.name">
              <el-option
                v-for="configDataItem in configData"
                :key="configDataItem.value"
                :value="configDataItem.value"
              >
                {{ configDataItem.label }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对应底层API">
            <el-select v-model="addHighLevelApi.lowApi.name">
              <el-option
                v-for="lowApiDataItem in lowApiData"
                :key="lowApiDataItem.value"
                :value="lowApiDataItem.value"
              >
                {{ lowApiDataItem.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #btn>
        <el-button type="primary" @click="addInput">新增输入参数</el-button>
      </template>
    </WmcDialog>
  </div>
</template>

<script lang="ts">
import { IHighApiData } from '@/render/store/drives/types'
import { defineComponent, PropType, ref, watch } from 'vue'
import { addHighLevelApiConfig } from './config/add-highlevel-api.config'
import WmcDialog from '@/render/base-ui/dialog'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: { WmcDialog },
  props: {
    modelValue: {
      type: Array as PropType<IHighApiData[]>,
      default: () => []
    },
    dataTypes: {
      type: Array,
      default: () => []
    },
    configDatas: {
      type: Array,
      default: () => []
    },
    lowApiDatas: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    let rowIndex = -1
    const highApiDatas = ref(props.modelValue)
    const addHighLevelApiDefault = {
      name: '',
      input: [
        {
          dataType: '',
          name: ''
        }
      ],
      output: {
        name: '',
        isNew: true,
        type: null,
        value: null,
        values: []
      },
      config: { name: '', dataType: null },
      lowApi: { name: '', description: null },
      isNew: true
    }
    const addHighLevelApi = ref()
    const dialogVisible = ref(false)
    const addHighLevelApiRef = ref()

    const dataType = props.dataTypes.map((item: any) => {
      return {
        label: item.name,
        value: item.name
      }
    })
    dataType.push({ label: 'unsigned char', value: 'unsigned char' })
    const configData = props.configDatas.map((item: any) => {
      return {
        label: item.name,
        value: item.name
      }
    })
    const lowApiData = props.lowApiDatas.map((item: any) => {
      return {
        label: item.name,
        value: item.name
      }
    })

    const updateRow = (index: number, row: any) => {
      dialogVisible.value = true
      addHighLevelApi.value = JSON.parse(JSON.stringify(row))
      rowIndex = index
    }
    const removeRow = (index: number, row: any) => {
      if (index !== -1) {
        highApiDatas.value.splice(index, 1)
      }
    }
    const openDialog = () => {
      dialogVisible.value = true
      addHighLevelApi.value = JSON.parse(JSON.stringify(addHighLevelApiDefault))
      rowIndex = -1
    }
    const closeDialog = () => {
      dialogVisible.value = false
    }
    const handleConfirm = () => {
      dialogVisible.value = false
      if (rowIndex === -1) {
        highApiDatas.value.push(addHighLevelApi.value)
      } else {
        highApiDatas.value[rowIndex] = JSON.parse(
          JSON.stringify(addHighLevelApi.value)
        )
      }
    }
    const addInput = () => {
      if (addHighLevelApi.value.input == null) {
        addHighLevelApi.value.input = []
      }
      addHighLevelApi.value.input.push({
        dataType: '',
        name: ''
      })
    }

    const deleteInput = (index: number) => {
      if (index !== -1) {
        addHighLevelApi.value.input.splice(index, 1)
      }
    }

    watch(
      highApiDatas,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      { deep: true }
    )

    return {
      dialogVisible,
      highApiDatas,
      addHighLevelApi,
      addHighLevelApiConfig,
      addHighLevelApiRef,
      dataType,
      configData,
      lowApiData,
      updateRow,
      removeRow,
      openDialog,
      closeDialog,
      handleConfirm,
      addInput,
      deleteInput
    }
  }
})
</script>

<style scoped lang="less">
.highlevel-api {
  .el-container {
    .el-header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      background-color: rgb(238, 241, 246);
      margin-bottom: 10px;
    }
    .el-main {
      padding: 0;
      border: 1px solid #ebeef5;
    }
  }
}
.demo-table-expand {
  font-size: 0;
  margin-left: 60px;
}
.demo-table-expand label {
  width: 110px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.input {
  margin-bottom: 5px;
}
</style>
